import React, { useState, useEffect } from 'react';
import { View, Animated } from 'react-native';
import { translateSize } from 'styles';
import * as styles from './style';

const LoadingContainer: React.FC = props => {
	const [loadingOpacity, setLoadingOpacity] = useState(new Animated.Value(0));
	const loadingAnimated = Animated.timing(loadingOpacity, {
		toValue: 1,
		duration: 3000,
	});
	const rotateZ = loadingOpacity.interpolate({
		inputRange: [0, 0.5, 1],
		outputRange: ['0deg', '540deg', '720deg']
	});

	const startAnimated = () => {
		Animated.loop(loadingAnimated).start();
	};

	useEffect(() => {
		startAnimated();
	}, []);

	return <View style={styles.container}>
		<View style={styles.innerContainer}>
			<Animated.Image
				source={require('./images/icon_loading.png')}
				style={{
					width: translateSize(150),
					height: translateSize(150),
					alignSelf: 'center',
					transform: [{ rotateZ }],
				}} />
		</View>
	</View>
}

export default LoadingContainer